<template>
  <div :class="cls">
    {{message.split(',')}}
  </div>
  <button @click="changeTxt">change</button>
  <div>{{text}}</div>
  <hr>
  <div><button @click="changeOne">改变</button></div>
  <div>{{state}}</div>
  <hr>
  <p>{{count}}</p>
  <p>{{arr}}</p>
  <button @click="handleChangeState">修改数据</button>
  <p>{{mainStore.count10}}</p>
  <hr>
  <h1>Pinia - 购物车实例</h1>
  <h2>商品列表</h2>
  <ProductList />
  <hr>
  <ShoppingCart />
  <hr>
  <div>{{msg.name}}</div>
  <n-button type="primary">naive-ui</n-button>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useMainStore } from "@/store";
import { ref, Ref, reactive, toRef, toRefs } from "vue";

import ProductList from "components/ProductList.vue";
import ShoppingCart from "components/ShoppingCart.vue";

const mainStore = useMainStore();
const { count, arr } = storeToRefs(mainStore);

const obj = reactive({ foo: 1, bar: 1 });

const state = toRef(obj, "foo");
const changeOne = () => {
  state.value++;
  console.log(obj);
};

let msg = reactive({ name: "xiao明" });

const message: string = "小,dd,慢,哈,哈,嗝";
type Cls = { a: boolean; b: boolean };

const cls: Cls = { a: true, b: true };
let text: Ref<string> = ref("哈哈");
const changeTxt = () => {
  text.value = "change text";
  console.log(text);
};

const handleChangeState = () => {
  //方式一
  // mainStore.count++;

  //方式二 如果需要修改多个数据，建议是要$patch 批量更新
  // mainStore.$patch({
  //   count: mainStore.count + 1,
  //   arr: [...mainStore.arr, 4],
  // });

  //方式三： $patch一个函数
  // mainStore.$patch((state) => {
  //   state.count++;
  //   state.arr.push(4);
  // });

  //方式四 逻辑比较多的时候可以封装到 action 做处理
  mainStore.changeState(10);
};
</script>


<style>
.a {
  color: red;
}
.b {
  border: 1px solid #000;
}
</style>
